<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="dashboard/header :: header"></div>

<body id="page-top">

	<div id="wrapper">
		<div id="content-wrapper">
			<div class="container-fluid">

				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="#">网络ACL访问控制</a></li>
				</ol>
				<form class="form-inline" id="trainingSearchForm">
					<div class="input-group mb-2 mr-sm-2">
						<select name="condition[masterCode]" style="width: 200px"
							id="inputState" class="form-control">
							<option th:each="m:${schools}" th:text="${m.masterName}"
								th:value="${m.masterCode}"></option>
						</select>
					</div>
					<label class="sr-only" for="inlineFormInputName2">数据库用户名</label> <input
						type="text" name="condition[dbaLoginName|like]"
						class="form-control mb-2 mr-sm-2" id="inlineFormInputName2"
						placeholder="数据库用户名">
						
					<label class="sr-only" for="inlineFormInputName2">所属主机</label> <input
						type="text" name="condition[hostIp|like]"
						class="form-control mb-2 mr-sm-2" id="inlineFormInputName2"
						placeholder="所属主机">
						
					<label class="sr-only" for="inlineFormInputName2">管理员</label> <input
						type="text" name="condition[managerMan|like]"
						class="form-control mb-2 mr-sm-2" id="inlineFormInputName2"
						placeholder="管理员">

					<div class="input-group mb-2 mr-sm-2">
						<select name="condition[hasStatus]" id="inputState"
							class="form-control">
							<option value="">状态</option>
							<option value="0">上架</option>
							<option value="1">下架</option>
						</select>
					</div>

					&nbsp;&nbsp;
					<button type="button" onclick="search(this)" class="btn btn-primary mb-2">搜索</button>
					<button type="button" onclick="add()" style="margin-left:10px;" class="btn btn-primary mb-2">添加</button>
					
					<!-- 
					<button type="button" style="position: absolute; right: 80px;" onclick="add()" class="btn btn-primary mb-2">添加</button>
					<button type="button" style="position: absolute; right: 20px;" onclick="exportData()" class="btn btn-primary mb-2">导出</button>
					-->
					
					<button type="button" style="position: absolute; right: 80px;" onclick="importData()" class="btn btn-primary mb-2">导入</button>
					<button type="button" style="position: absolute; right: 20px;" onclick="exportData()" class="btn btn-primary mb-2">导出</button>
					
				</form>


				<div class="span12">
					<div class="table-responsive">
						<table class="table table-bordered" id="dataTable" width="100%"
							cellspacing="0">
							<thead>
								<tr>
									<th>所属机房</th>
									<th>业务名称</th>
									<th>到期日期</th>
									<th>源主机名称</th>
									<th>目标应用名称</th>
									<th>目标主机名称</th>
									<th>源服务协议</th>
									<th>源端口</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
							<footer>
								<tr>
									<th>所属机房</th>
									<th>业务名称</th>
									<th>到期日期</th>
									<th>源主机名称</th>
									<th>目标应用名称</th>
									<th>目标主机名称</th>
									<th>源服务协议</th>
									<th>源端口</th>
								</tr>
							</footer>
						</table>
					</div>
				</div>

			</div>
		</div>
	</div>

	<script src="http://training-static.linesno.com/vendor/jquery/jquery.min.js"></script>
	<script src="http://training-static.linesno.com/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
	<script src="http://training-static.linesno.com/layer/layer.js"></script>

	<script src="http://training-static.linesno.com/vendor/jquery-easing/jquery.easing.min.js"></script>
	<script src="http://training-static.linesno.com/vendor/datatables/jquery.dataTables.js"></script>
	<script src="http://training-static.linesno.com/vendor/datatables/dataTables.bootstrap4.js"></script>

	<script type="text/javascript">
		$(document).ready(function() {
		  $('#dataTable').DataTable({
			  serverSide: true ,
			  ordering: false , 
			  searching : false ,
              bLengthChange : false ,
              rowNum : 15 , 
              multiselect : true,
              ajax : {
                  "url": "/manager/network_list_data",
                  "dataType": "json" , 
                  "data": function (d) {
                      console.log('d = ' + d) ;
                      var searchParams = paramsBuilder() ;
                      if(searchParams){
                        $.extend(d,searchParams); 
                      }
                  }
              } ,
              columns: [
                  { data: 'masterCode_label' },
                  { data: 'dbaLoginName' },
                  { data: 'spaceDesc' },
                  { data: 'hostIp' },
                  { data: 'endTime' },
                  { data: 'managerMan' } , 
                  { data: 'hasStatus' } , 
                  { data: 'id' } 
              ] , 
              columnDefs: [
            	  {
                      "render": function(data, type, row) {
                	  		var id = row.id ;
                	  		var html = "" ;
                	  		console.log("data = " + data) ;
                    	  	if(data === 0){
								html = "<a data-id='"+id+"' style='cursor:pointer' onclick='databaseStatus(this,\"1\")'><i class='fa fa-cloud-upload-alt'></i> 上架</a>" ; 
                    	  	}else{
								html = "<a data-id='"+id+"' style='cursor:pointer;color:red;' onclick='databaseStatus(this,\"0\")'><i class='fa fa-cloud-download-alt'></i> 下架</a>" ; 
                    	  	}
   		           		return html;
                      },
                      "targets": 6
				  } ,
            	  {
                  "render": function(data, type, row) {
                	  		var id = '"' + row.id + '"';
   		           		var html = "<a data-id='"+data+"' style='cursor:pointer' onclick='applyRunman(this)'><i class='fa fa-leaf'></i> 通过</a>" ; 
   		           		html += "&nbsp;&nbsp;&nbsp;&nbsp;<a data-id='"+data+"' style='cursor:pointer;color:red' onclick='editDatabase(this)'><i class='fa fa-edit'></i> 编辑</a>" ; 
   		           		return html;
                  },
                  "targets": 7
              }],
              language : {
                  "sProcessing": "处理中...",
                  "sLengthMenu": "显示 _MENU_ 项结果",
                  "sZeroRecords": "没有匹配结果",
                  "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                  "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                  "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                  "sInfoPostFix": "",
                  "sSearch": "搜索:",
                  "sUrl": "",
                  "sEmptyTable": "表中数据为空",
                  "sLoadingRecords": "载入中...",
                  "sInfoThousands": ",",
                  "oPaginate": {
                      "sFirst": "首页",
                      "sPrevious": "上页",
                      "sNext": "下页",
                      "sLast": "末页"
                  },
                  "oAria": {
                      "sSortAscending": ": 以升序排列此列",
                      "sSortDescending": ": 以降序排列此列"
                  }
             }

		  });
		});
		
		//搜索
		function search(btn){
			// $('#dataTable').draw();
			$("#dataTable").dataTable().fnDraw(false);
		}
	
		function importData(){
			layer.open({
				  type: 2,
				  title: false,
				  shade: 0.8, 
				  title: '资产导入',
				  area: ['50%', '40%'],
				  content: ['/manager/network_import_data', 'yes'], //iframe的url，no代表不显示滚动条
				  end: function(){ 
					 $("#dataTable").dataTable().fnDraw(false);
				  }
				});
		}
		
		/**
		 * get params
		 */
		function paramsBuilder() {
		    var param = {} ;
		    $('#trainingSortPanel input').each(function() {
		        if ($(this).val() != '' && this.name != '') {
		            param[this.name] = this.value;
		        }

		    });
		    var i = $('#trainingSearchForm input') ; 
		    console.log("i = " + i) ; 
		    $('#trainingSearchForm input').each(function() {
		        if ($(this).val() != '' && this.name != '') {
		            param[this.name] = this.value;
		        }

		    });
		    $('#trainingSearchForm select').each(function() {
		        console.log('value = ' + this.value + ' , value = ' + $(this).val());
		        if ($(this).val() != null &&  $(this).val() != '' && this.name != '') {
		            param[this.name] = $(this).val() ;
		        }
		    });
		    return param ;
		}
	
		var applyManDoing = false ; 
		function applyRunman(btn){ 
			if(applyManDoing){
				return ; 
			}
			applyManDoing = true ; 
			layer.confirm('是否通过？', {
			  btn: ['通过','不通过'] //按钮
			}, function(){  // 通过 
				
				var id = $(btn).attr("data-id") ; 
				var index = layer.load(1, { shade: [0.8,'#000']  });
				$.post("/manager/network_apply_pass?id="+id , function(response){
					console.log("response= " + response) ; 	
					applyManDoing = false ;
					layer.closeAll() ; 
					if(response.code == 200){
						$("#dataTable").dataTable().fnDraw(false);
					}else{
						layer.alert(response.message) ; 
					}
				}) ; 
				
			});
		}
		
		function add(btn){
			layer.open({
				  type: 2,
				  title: false,
				  shade: 0.8, 
				  title: '修改',
				  area: ['50%', '80%'],
				  content: ['/manager/network_add', 'no'], //iframe的url，no代表不显示滚动条
				  end: function(){ //此处用于演示
				     console.log("close") ; 
					 $("#dataTable").dataTable().fnDraw(false);
				  }
				});
		}
		
		function editDatabase(btn){
			var id = $(btn).attr("data-id") ;
			layer.open({
				  type: 2,
				  title: false,
				  shade: 0.8, 
				  title: '修改',
				  area: ['50%', '80%'],
				  content: ['/manager/network_modify/'+id, 'no'], //iframe的url，no代表不显示滚动条
				  end: function(){ //此处用于演示
				     console.log("close") ; 
					 $("#dataTable").dataTable().fnDraw(false);
				  }
				});
		}
		
		function modify(btn){
			var id = $(btn).attr("data-id") ;
			layer.open({
				  type: 2,
				  title: false,
				  shade: 0.8, 
				  title: '修改',
				  area: ['50%', '80%'],
				  content: ['/manager/network_modify/'+id, 'no'], //iframe的url，no代表不显示滚动条
				  end: function(){ //此处用于演示
				     console.log("close") ; 
					 $("#dataTable").dataTable().fnDraw(false);
				  }
				});
		}
		
		function exportData(){
            var searchParams = paramsBuilder() ;
            console.log("searchParams = " + searchParams) ;
            
            var index = layer.load(1, {shade: [0.8,'#000']});
			$.post("/manager/network_export", searchParams , function(response){
				console.log("response = " + response) ; 
				layer.close(index);
				
				if(response.code == 200){
					var cIndex = layer.confirm('导出文件已生成,请点击下载.', {
					  btn: ['下载','关闭'] //按钮
					}, function(){
						layer.msg("response.data = " + response.message) ;
						window.location='/manager/download?fileName='+response.message ;
					}, function(){
						layer.close(cIndex);
					});
				}else{
					layer.msg(response.message) ;
				}
				
			}) ; 
		}
		
		function databaseStatus(_self , _status){
			var _id = $(_self).attr("data-id") ;
			$.post("/manager/network_status", {id:_id,status:_status} , function(response){
				console.log("response = " + response) ; 
				$("#dataTable").dataTable().fnDraw(false);
			}) ; 
		}
		
		function showPic(picSrc){
			var json = {
					  "title": "", //相册标题
					  "id": 123, //相册id
					  "start": 0, //初始显示的图片序号，默认0
					  "data": [   //相册包含的图片，数组格式
					    {
					      "alt": "图片名",
					      "pid": 666, //图片id
					      "src": picSrc , //原图地址
					      "thumb": picSrc //缩略图地址
					    }
					  ]
					} ; 
			layer.photos({
			    photos: json
			    ,anim: 5 
			});
		}
	</script>

</body>

</html>
